﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复盘后台管理系统</title>
    <link rel="stylesheet" href="{:rtrim('__PUBLIC__', '/')}/login/css/index.css">
    <script type="text/javascript" src="{:rtrim('__PUBLIC__', '/')}/login/js/jquery.js"></script>
    <style>
        .login-btn {
            text-align: center;
        }

        #errtips {
            text-align: center;
            margin: 5px;
            color: #d50b2b;
            font-size: 14px;
        }
    </style>
</head>
<body>
<script>

    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 24});
        $(window).resize(function () {
            var whei = $(window).width();
            $("html").css({fontSize: whei / 24})
        });
        $("#pd-form-username").focus(function () {
            $('#errtips').addClass('hide');
            $('#errtips').html('');
        });
        $("#pd-form-password").focus(function () {
            $('#errtips').addClass('hide');
            $('#errtips').html('');
        });
        $('input[name=captcha]').focus(function () {
            $('#errtips').addClass('hide');
            $('#errtips').html('');
        });

    });
</script>
<div class="main">

    <div class="header">
        <div class="header-center fl">
            <div class="header-title">
                复盘应用后台管理
            </div>
            <!--            <div class="header-img"></div>-->
        </div>
        <div class="header-bottom fl"></div>

    </div>
    <form action="" method="post" id="login-form">
        <div class="content">
            <div class="content-right">
                <div class="right-infp">
                    <div id="errtips" class="hide"></div>
                    {:token()}
                    <div class="right-infp-name">
                        <input type="text" id="pd-form-username" placeholder="{:__('Username')}" name="username"
                               autocomplete="off" value="" data-rule="{:__('Username')}:required;username">
                    </div>
                    <div class="right-infp-name">
                        <input type="password" id="pd-form-password" placeholder="{:__('Password')}" name="password"
                               autocomplete="off" value="" data-rule="{:__('Password')}:required;password">
                    </div>
                    {if $Think.config.fastadmin.login_captcha}
                    <div class="right-infp-name" style="width: 55%;">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
                        </div>
                        <input type="text" name="captcha" class="form-control" placeholder="{:__('Captcha')}"
                               data-rule="{:__('Captcha')}:required;length({$Think.config.captcha.length})"
                               autocomplete="off"/>
                        <span class="input-group-addon" style="padding:0;border:none;cursor:pointer;">
                                    <img src="{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha" width="76%" height="40"
                                         style="margin-left: 105%" id="captchaImage"
                                         onclick="this.src = '{:rtrim('__PUBLIC__', '/')}/index.php?s=/captcha&r=' + Math.random();"/>
                            </span>
                    </div>
                    {/if}
                    <div class="form-group checkbox">
                        <label class="inline" for="keeplogin">
                            <input type="checkbox" name="keeplogin" id="keeplogin" value="1"/>
                            {:__('Keep login')}
                        </label>
                    </div>
                    <div class="right-infp-btn" style="margin-top: 15px">
                        <a class="btn login-btn" onclick="submit()">{:__('Sign in')}</a>
                    </div>
                </div>
            </div>
        </div>
    </form>

</div>
<script>
    function submit() {
        var formData = $("#login-form").serializeArray();
        let param = {}
        for (let i = 0; i < formData.length; i++) {
            param[formData[i].name] = formData[i].value
        }

        $.ajax({
            url: "{:url('index/login')}",
            type: 'post',
            data: param,
            dataType: 'json',
            success: function (res) {
                if (res.code == 1) {
                    window.location.href = "{:url('index/index')}";
                } else {
                    $("#captchaImage").click();
                    $("#errtips").removeClass('hide').html(res.msg);
                    $("input[name=__token__]").val(res.data.token);
                }
            }
        })
        return false;
    }

    document.addEventListener('keydown', function(event) {
        if (event.key === 'Enter') {
            submit();
        }
    });
</script>
</body>
</html>